<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'


//签到按钮
const signIn = ref<boolean>(true)
const signInBtn = () => {
    //发请求
    //签到成功
    ElMessage.success('签到成功')
    signIn.value = false
}
</script>

<template>
    <!-- 等级+经验盒子 -->
    <div class="person-levelexp-box">
        <!-- 经验盒子 -->
        <div class="person-level-box">
            <div class="person-level-header">
                <span>当前等级</span>
            </div>
            <div class="person-level-body">
                <div>
                    <h2>新手鸭</h2>
                    <span>LV.1</span>
                    <span>排名12821</span>
                    <span>经验 0</span>
                </div>
                <div class="img-box">
                    <img src="@/views/profile/user/images/bcg02.avif" alt=""></img>
                </div>
            </div>
            <div class="person-level-footer">
                <div>还差XX经验升级，可申请选作推荐题解</div>
                <div class="person-level-footer-button">
                    <el-icon>
                        <Star />
                    </el-icon>
                    <div style="margin-right: 20px;"> 图标经验明细 </div>
                    <el-icon>
                        <Bell />
                    </el-icon>
                    <div> 等级特权及规则 </div>
                </div>
            </div>
        </div>
        <!-- 签到盒子 -->
        <div class="person-exp-box">
            <img src="@/views/profile/user/images/bcg-03.png" alt="">
            <el-button type="success" @click="signInBtn" :disabled="!signIn">{{ signIn ? '立即签到' : '今日已签到'
                }}</el-button>
        </div>
    </div>
    <!-- 活跃盒子 -->
    <el-card style="min-width: 768px;">
        <div class="person-active-box">
            <p>2025共发布题解0次，累计天数0次</p>
            <div>活跃@@@@@@不活跃</div>
        </div>
        <!-- 日期组件 -->
        <div>
            需要一个日期组件
        </div>
    </el-card>
    <!--题目记录盒子 -->
    <el-card style="min-width: 768px;" class="person-record-box">
        <template #header>
            <ul class="person-record-header">
                <li><router-link to="/profile/questionCollect">题目收藏</router-link></li>
                <li><router-link to="/profile/answerCollect">回答收藏</router-link></li>
                <li><router-link to="/profile/history">刷题记录</router-link></li>
                <li><router-link to="/profile/answer">我的回答</router-link></li>
                <li><router-link to="/profile/question">创建题目</router-link></li>
            </ul>
        </template>
        <router-view></router-view>
    </el-card>
</template>


<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    border-radius: 8px;
}



/* 经验和签到卡片区域 */
.person-levelexp-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    min-width: 768px;

    .person-level-box {
        width: 100%;
        margin-right: 20px;
        position: relative;
        padding-top: 20px;
        border-radius: 10px;
        background: linear-gradient(104.12deg, #fed73b, #f1d14a 46.87%, #f0c023);

        .person-level-header {
            position: absolute;
            top: 0;
            left: 0;
        }

        .person-level-body {
            display: flex;
            justify-content: space-between;
            margin: 20px 20px;

            span {
                margin-right: 20px;
            }

            .img-box {
                transform: rotateX(10deg) rotateY(10deg) rotate(-10deg) scale(1);

                img {
                    width: 113px;
                    height: 87px;
                }
            }
        }

        .person-level-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 20px;

            .person-level-footer-button {
                display: flex;
                align-items: center;

            }
        }
    }

    .person-exp-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(104.12deg, #fed73b, #f1d14a 46.87%, #f0c023);
        padding: 0 20px;


        img {
            width: 133px;
            height: 120px;
            margin-bottom: 20px;
        }

        .el-button {
            width: 60%;
            border-radius: 6px;
            margin-bottom: 10px;
        }
    }

    .person-exp-box>*:hover {
        transform: scale(1.05);
        /* 关键缩放属性 */
        transition: all 0.3s ease;
    }

}

/* 活跃度盒子 */
.person-active-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 题目记录卡片 */
.person-record-header {
    display: flex;
    gap: 20px;
    list-style: none;
    /* 移除默认列表样式 */
    padding: 0;

    /* 移除默认内边距 */
    li {
        border-bottom: 2px solid transparent;
        padding-bottom: 2px;
        cursor: pointer;
    }
}

.person-record-header li:hover {
    border-bottom: 2px solid rgb(94, 28, 218);
    color: rgb(94, 28, 218);
    /* 粉色下划线 */
    padding-bottom: 2px;
    /* 为下划线留出空间 */
    transition: border-bottom 0.3s ease;
    /* 平滑过渡效果 */
}
</style>
